<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.container{
				width: 300px;
				height: 400px;
				border: 1px solid red;
				margin: 100px auto;
				overflow: hidden;
			}
			li{
				list-style: none;
				text-align: center;
				border-bottom:1px dashed #CCCCCC;
				height: 25px;
				line-height: 25px;
			}
		</style>
	</head>
	<body>
		<div class="container" id="container">
			<ul id="uu">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>10</li>
				<li>11</li>
				<li>12</li>
				<li>13</li>
				<li>14</li>
				<li>15</li>
				<li>16</li>
			    <li>17</li>
				<li>18</li>
				<li>19</li>
				<li>20</li>
				<li>21</li>
				<li>22</li>
				<li>23</li>
			</ul>
		</div>
	  <script>
	  	var con =document.getElementById("container");
	  	var us=document.getElementById("uu");
	  	var h=us.offsetHeight;
	  	var t;
	  	var index=0;
	  	t=setInterval(function(){
	  		index+=10;
	  		us.style.marginTop=index+"px";
	  		if(index>220){
	  			index=0
	  			us.style.marginTop="0px";
	  		}
	  		us.style.marginTop=-(index)+"px";
	  	
	  	},500)
	  	
	  </script>
	</body> 
</html>
